<template>
  <view >
    <u-navbar title="工单详情" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />

    <view >
      <!-- tabs 切换 -->
      <view class="sticky z-4" id="container" :style="{ top: `${top}px` }">
        <u-tabs :bold="false" :current="tabsCurrent" :is-scroll="false" :list="list" active-color="#2D8CF0"
          bar-height="10" :bar-width="barWidth" duration="0" @change="change"></u-tabs>
        <u-line color="#CCCCCC" length="94%" margin="-5rpx 0 0 20rpx" />
      </view>

      <view v-if="tabsCurrent === 0" class="flex flex-column justify-between" id="container"
        :style="{ minHeight: `calc(100vh - ${top}px)` }">
        <view>

        <view class="mt-20">
          <sub-title class="mt-20" title="设备信息"> </sub-title>
          <view class="p-lr-40 mb-20">
            <view class="fz-30 lh-42  mt-20 flex justify-between align-center">
              <text class="w-200 color-333333 font-bold">设备名称</text>
              <view class="flex1 text-right color-888888">
                <text>{{ workOrderInfo.deviceName || '-' }}</text>
              </view>
            </view>
            <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
              <text class="w-200 color-333333 font-bold">设备编号</text>
              <view class="flex1 text-right color-888888">
                <text>{{ workOrderInfo.deviceNo || '-' }}</text>
              </view>
            </view>
            <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
              <text class="w-180 color-333333 font-bold">分组房间</text>
              <view class="flex1 text-right color-888888">
                <text>{{ workOrderInfo.roomName || '-' }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="mt-20">
          <sub-title class="mt-20" title="故障内容"></sub-title>
          <view class="p-lr-40 mb-20">
            <view class="fz-30 lh-42 mt-20">
              <text class="w-200 color-333333 font-bold"> <text class="fz-32 color-FF6262">*</text>故障描述</text>
              <view class="break-all mt-10">
                <text class="color-888888">{{ workOrderInfo.description || '暂无描述'}}</text>
              </view>
            </view>

            <view class="fz-30 lh-42 mt-20 ">
              <text class="w-200 color-333333 font-bold">关联照片</text>
              <view class="flex flex-wrap mt-20 align-center">
                <!-- 图片缩略图 -->
                <view class="relative mr-30 " v-for="(item, index) in workOrderInfo.imageList" :key="index">
                  <image class="h-150 w-150" :data-cur="item.url" :src="item.url" @tap="previewImage" />
                </view>

                <view v-if="!workOrderInfo.imageList || workOrderInfo.imageList.length === 0"
                  class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
                  <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
                  <text class="color-fff fz-24 lh-33 mt-10">暂无图片</text>
                </view>
              </view>
            </view>

          </view>
        </view>
      </view>
      </view>

      <view v-else>
        <ChildFixDetail :photoFiles="photoFiles" :workOrderInfo="workOrderInfo" />
      </view>
    </view>
  </view>
</template>

<script>
import subTitle from "@/components/SubTitle/SubTitle";

import ChildFixDetail from "./components/child-fix-detail.vue";
import getNavBarHeight from "@/mixins/getNavBarHeight";

import { workOrderDetail } from "@/api/repair/workOrder"


export default {
  name: "FixDoneDetail",
  components: {
    subTitle,ChildFixDetail
  },
  mixins: [ getNavBarHeight ],

  onLoad (options) {
    this.status = options.status || ''
    this.workOrderId = options.workOrderId
    this.hospitalId = options.hospitalId
  },
  onShow () {
    this.doQuery()
  },

  data () {
    return {
      //tabs
      barWidth: 350,
      tabsCurrent: 0,
      list: [{ name: "报修内容" }, { name: "维修详情" }],
      //工单数据
      workOrderInfo: {},
      hospitalId: '',
      workOrderId: '',
      status: '',
      photoFiles:[]
    }
  },
  methods: {
    //切换tab
    change (index) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      })
      this.tabsCurrent = index;
      this.pageNum = 1
    },
    doQuery () {
      workOrderDetail(this.workOrderId).then(res => {
        this.workOrderInfo = res.data || {}
      })
    },
    // 点击预览
    previewImage (e) {
      const current = e.currentTarget.dataset.cur;
      const urls = this.workOrderInfo.imageList.map(el => el.url);
      uni.previewImage({
        current: current,
        urls: urls,
        indicator: "none",
      });
    },
  },
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}

/deep/ .u-collapse-head {
  margin-bottom: 0 !important;
  border-bottom: 1px solid #ccc;
  padding: 0 !important;
  padding-bottom: 30rpx !important;
  padding-top: 20rpx !important;
}
</style>
